<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed >
        <template slot="left">
          <p style="color: #fff">小鑫头条</p>
        </template>
        <template #right>
          <!-- 坑：postcss只能翻译style里的css样式代码，标签内行内样式它无法转换px转rem，所以需要自己手动计算 -->
          <van-icon name="search" size="0.48rem" color="#fff" @click="$router.push('/search')" />
        </template>
      </van-nav-bar>
    </div>
    <!-- tab导航栏 -->
    <div class="main">
      <van-tabs v-model="channelId" animated @change="changeTabFn">
        <van-tab v-for="item in userChannelList" :key="item.id" :title="item.name" :name="item.id">
        <!-- 文章列表 -->
          <ArticleListVue :channelId="channelId"></ArticleListVue>
        </van-tab>
      </van-tabs>
      <!-- 加号按钮 -->
      <van-icon name="plus" size="0.46rem" @click="show = true"/>
    </div>
    <!-- 编辑频道 -->
    <van-popup v-model="show" class="edit_wrap">
      <channel-edit
      @close="show = false"
      @delOption="delOption"
      :userChannelList="userChannelList"
      :moreChannelList="moreChannelList"
      v-model="channelId"
      ></channel-edit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateUserChannels } from '@/api'
import ArticleListVue from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'HomeVue',
  components: {
    ArticleListVue,
    ChannelEdit
  },
  data () {
    return {
      channelId: 0,
      userChannelList: [], // 用户频道
      moreChannelList: [], // 更多频道
      articleList: [], // 文章列表
      show: false, // 频道编辑的显示与隐藏
      saveEachTabScroll: {} // 保存每个tab的滚动条位置
    }
  },
  async created () {
    // 用户频道列表
    const res = await getUserChannelsAPI()
    this.userChannelList = res.data.data.channels
    // 全部频道列表
    const res2 = await getAllChannelsAPI()
    // 更多频道（从全部频道对用户频道进行过滤从而得到更多频道）
    this.moreChannelList = res2.data.data.channels.filter(item => !this.userChannelList.some(val => val.id === item.id))
  },
  methods: {
    // 操作用户和更多频道
    async delOption (index, identify) {
      if (identify) {
        // 添加频道到用户频道
        this.userChannelList.push(...this.moreChannelList.splice(index, 1))
      } else {
        // 删除用户频道并添加到更多频道
        this.moreChannelList.push(...this.userChannelList.splice(index, 1))
      }
      // 对用户频道数据进行处理，发送到服务器
      const channels = this.userChannelList.map((item, index) => {
        const val = { ...item }
        delete val.name
        val.seq = ++index
        return val
      })
      // 更新用户频道
      await updateUserChannels(channels)
    },
    // 保存每个tab滚动条的位置
    scrollSave () {
      this.saveEachTabScroll[this.channelId] = document.documentElement.scrollTop
    },
    changeTabFn () {
      // 切换tab后恢复滚动条的位置
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.saveEachTabScroll[this.channelId]
      })
    }
  },
  activated () {
    // 恢复滚动条的位置
    document.documentElement.scrollTop = this.saveEachTabScroll[this.channelId]
    // 侦听滚动条事件并保存滚动条的位置
    window.addEventListener('scroll', this.scrollSave)
  },
  // 移动滚动条侦听事件
  deactivated () {
    window.removeEventListener('scroll', this.scrollSave)
  }
}
</script>

<style lang="less" scoped>
  .main {
    margin-top: 46px;
    /deep/ .van-tabs__wrap {
      z-index: 99;
      position: sticky;
      top: 46px;
    }
    .van-icon-plus {
      z-index: 999;
      position: fixed;
      top: 60px;
      right: 0;
      color: #646566;
      background-color: #fff;
    }
  }
  /deep/ .van-hairline--bottom {
    position: fixed;
  }
  .edit_wrap {
    width: 100vw;
    height: 100vh;
  }
</style>
